{extend name="base"/}
{block name="main"}
    <style>
        td#id{width:12%}
        td#content{width:60%}
        td#xy{width:12%}
        td#do{width:16%}
    </style>
    <div class="row" style="display: flex;align-content: center;align-items: center;justify-content: center;">
        <div class="col-xs-8">
            <div class="form-group">
                <textarea name="r_content" id="r_content" class="form-control" rows="3"></textarea>
            </div>
        </div>
        <div class="col-xs-3" style="display: flex;align-items: center;flex-direction: column;">
                <label>
                    <input type="radio" name="r_xy" id="r_xy" value="1" checked> 启用
                </label>
                <label>
                    <input type="radio" name="r_xy" id="r_xy"  value="0"> 停用
                </label>
         </div>   
        <div class="col-xs-3">
            <div class="form-group">
                <button class="btn btn-default" id="add" type="button">新增</button>
            </div>
        </div>
    </div>
	<div class="content">
	    <div class="table">
            <table class="table">
              <thead>
                <tr>
                  <th>
                      <div class="form-inline">
                          <label class="checkbox">
                            <input type="checkbox" dom="input#tid" class="choseall" id="choseall" value=""> ID
                          </label>
                      </div>
                  </th>
                  <th>内容</th>
                  <th>启用</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
    		{volist name='list' id='vo' empty='暂时没有数据'}
    		<tr tid="{$vo.id}">
    		    <td id="id">
    		        <label class="control-label">
    		        <input type="checkbox" class="tid" id="tid" value="{$vo.id}"> {$vo.id}
    		        </label>
    		    </td>
    		    <td id="content">{$vo.content}</td>
    		    <td id="xy" xy="{$vo.xy}"><span class="label label-success" type="xy" data-loading-text="loading...">{eq name="$vo.xy" value="1"}启用{else/}停用{/eq}</span></td>
    			<td id="do">
    			    <span class="label label-success bbsredo" type="del" data-loading-text="loading...">删除</span>
    			</td>
    		</tr>
    		{/volist}
              </tbody>
            </table>
        </div>
        {$list->render()}
	</div>
    <li class="list-group-item">
        <div class="row">
            <div class="col-xs-3">
                <a id="chose" dom="input#tid" class="label label-success">反选</a> <a id="choseall" dom="input#tid" class="label label-default">全选</a>
            </div>
        	<div class="col-xs-5">
        		<div class="input-group">
        			<span class="input-group-btn">
        				<select id="bbsdoselect" class="btn btn-default">
        				  <option value="0">选择操作</option>
        				  <option value="1">删除</option>
        				  <option value="2">启用</option>
        				  <option value="3">停用</option>
        				</select>
        			</span>
        		</div>
        	</div>
            <div class="col-xs-4">
                <button id="bbsdo" class="btn btn-default" data-loading-text="Loading...">确定</button>
            </div>
        </div>
    </li>
<script>
$(function() {
	$('.content').on('click','td#content',function(){
		const tid=$(this).parent().attr("tid")
		$('#myModal').modal('show')
		$('.btn.btn-primary').show();
		$.ajax({
			url:'bbsredo',
			type:'post',
			data:{tid:tid,r_do:4},
			timeout:'15000',
			async:true,
				success:function(data){
					$(".modal-title").html('修改');
					$(".modal-body").html(`
                        <form role="form" id="editpost">
                          <input type="hidden" name="r_do" value="5">
                          <input type="hidden" name="r_id" value="${data.id}">
                          <div class="form-group">
                            <label for="inputfile">内容</label>
                            <textarea name="r_content" id="url" class="form-control" rows="5">${data.content}</textarea>
                          </div>
                          <div class="form-group">
                            <label class="radio-inline">
                                <input type="radio" id="r_xy" name="r_xy" value="1"> 启用
                            </label>
                            <label class="radio-inline">
                                <input type="radio" id="r_xy" name="r_xy" value="0"> 停用
                            </label>
                          </div>               
                        </form>
					`);
					$(`.modal-body #r_xy[value="${data.xy}"]`).prop("checked", true);
				    
				}
		});
	});
	$('.btn.btn-primary').click(function(){
		$.ajax({
			url:'bbsredo',
			type:'post',
			data:$("form#editpost").serialize(),
			timeout:'15000',
			async:true,
            success: (data) => {layer.alert(data.msg,{shadeClose:true,title:'操作结果'});},
			error: () => {},
        	complete: () => {$('.content').load('bbsre.html .content')}
		});
		$('#myModal').modal('hide')
	});
	$('button#add').click(function(){
		const r_content=$('textarea#r_content').val();
		const r_xy=$('#r_xy:checked').val();
		if (!r_content){layer.tips('请输入内容', '#r_content', {tips: [1, '#0FA6D8']}); return;}
		$.ajax({
			url:'bbsredo',
			type:'post',
			data:{r_content:r_content,r_xy:r_xy,r_do:6},
			timeout:'15000',
			async:true,
            success: (data) => {layer.msg(data.msg);},
			error: () => {},
        	complete: () => {$('.content').load('bbsre.html .content')}
		});
	});
	$('.content').on('click','td#xy span,td#do span',function(){
	    const type=$(this).attr("type")
		const tid=$(this).parent().parent().attr("tid")
		let rdo;
		if (type=='del'){
		    rdo=1
		}else if (type=='xy'){
		    const xy=$(this).parent().attr("xy")
		    rdo=xy==1?3:2;
		}else{
		    return;
		}
		$.ajax({
			url:'bbsredo',
			type:'post',
			data:{tid:tid,r_do:rdo},
			timeout:'15000',
			async:true,
            success: (data) => {layer.msg(data.msg);},
			error: () => {},
        	complete: () => {$('.content').load('bbsre.html .content')}
		});
	});
	$("button#bbsdo").click(function(){
		r_do=$('#bbsdoselect option:selected').val();
		if (r_do==0){layer.tips('请选择操作', '#bbsdoselect', {tips: [1, '#0FA6D8']}); return;}
		if ($('input#tid:checked').length<1){layer.alert('请至少选择一条',{shadeClose:true,title:''}); return;}
		var tid=[];
		$('input#tid:checked').each(function(){
			tid.push($(this).val());
		})
		layer.confirm("确定?", {
		  btn: ['确定','取消']
		  ,shadeClose:true
		  ,title:''
		}, function(){
			layer.msg('操作执行中,请等待', {
			  icon: 16
			  ,shade: 0.1
			  ,time:3000
			});
			$.ajax({
					url:'bbsredo',
					type:'post',
					data:{
						r_do:r_do,
						tid:tid.join(',')
						},
					async:true,
					success: (data) => {layer.alert(data.msg,{shadeClose:true,title:'操作结果'});},
					error: () => {},
	            	complete: () => {$('.content').load('bbsre.html .content')}
			});
		});
	});
});
</script>
{/block}